<template>
  <div class="page flex flex-rc pt-100">
    <div style="width: 80%">
      <!-- Logo -->
      <div class="flex flex-center mb-50">
        <img style="width: 150px" src="../assets/img/logo.png" />
      </div>

      <!-- 注册邀请码 -->
      <div class="p-20 bcl-white radius mb-50">
        <div class="fz-20 ta-center mb-10">{{ $t('邀请码') }}</div>

        <van-field
          :placeholder="$t('请输入上级邀请码')"
          :border="false"
          v-model="inviteId"
        ></van-field>
      </div>

      <!-- 注册按钮 -->
      <van-button block @click="register">
        {{ $t('立即注册') }}
      </van-button>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { showToast } from 'js/utils'
import api from 'js/api'

const router = useRouter()
const route = useRoute()

const inviteId = ref(route.query.inviteId || '')

if (inviteId.value) {
  register()
}

// 注册
async function register() {
  if (!inviteId.value) {
    return showToast($t('请输入上级邀请码'))
  }

  const params = {
    wallet: inviteId.value,
  }

  const { code, data, msg } = await api.register(params)

  showToast(msg)

  if (code === 1) {
    if (!data) {
      setTimeout(() => {
        router.replace('/')
      }, 2000)
    }
  } else if (code === 0) {
    if (data.code === 1) {
      setTimeout(() => {
        router.replace('/')
      }, 2000)
    }
  }
}
</script>

<style lang="scss" scoped>
.page {
  background: url('../assets/img/bg.png') no-repeat center / cover;

  .logo {
    width: 150px;
  }

  :deep(.van-field) {
    border-radius: 100px;
    background-color: #484a54;

    input {
      text-align: center;
      color: white;
    }
  }
}
</style>
